<template>
	<div class="container">
		<div :key="Math.random() * 100" class="el-card-body-top-zero sonsuming-analysis">
			<YdCard v-if="state.isApiOrSdk" :title="props.isInterruptIntervalTime ? '中断时长变化趋势' : '中断次数变化趋势'">
				<div style="width: 100%; height: 100%">
					<YdEcharts
						ref="interruptTimeTrendBar"
						:ref-val="'interrupt-time-trend-bar'"
						:options="state.interruptTimetrendOptions"
						@echartsClick="echartsClick"
					/>
				</div>
			</YdCard>
			<YdCard :title="'平均响应耗时趋势'">
				<!-- route.query.invocationMode === 'ApiOrSdk' ? 50 + '%' : 100 + '%' -->
				<div :style="{ width: 100 + '%', height: 100 + '%' }">
					<YdEcharts :ref-val="'average-response-trend-line'" :options="state.averageResponseTrendOptions" @echartsClick="echartsClick" />
				</div>
			</YdCard>
			<YdCard :title="'响应耗时分布'">
				<div style="width: 100%; height: 100%">
					<YdEcharts :ref-val="'response-distribution-bar'" :options="state.responseDistributionOptions" @echartsClick="echartsClick" />
				</div>
			</YdCard>
		</div>
	</div>
</template>

<script setup lang="ts">
import { ECOption } from '../../../../echarts';
import { getCurrentInstance, reactive, ref, watch } from 'vue';
import { useRoute } from 'vue-router';
import 'echarts/lib/component/legend';
import YdEcharts from '@/components/YdEcharts/index.vue';
import { queryDataResponseTimeDistribution } from '@/api/middle-monitor/ability-server-analysis';
import { dataZoom, SYMBOLSIZE, GRID, formatterToolTipFn, NAMETEXTSTYLE } from '../echartsConfig';
import { commonFormatter, toDecimalFormate2 } from '@/utils/common';
import { colorSortGroup, xAxisOrYaxis } from '@/utils/echartsConfig';

const route = useRoute();
const emit = defineEmits<{
	(event: 'echartsClick', e: any): void;
}>();
interface Props {
	interruptResponseTimeScale: any;
	interruptResponseTimeData: any;
	responseTimeTrendScale: any;
	responseTimeTrendData: any;
	responseTimeDistributionScale: any;
	responseTimeDistributionData: any;
	isInterruptIntervalTime: boolean;
	invocationModeName: string;
}
const props = withDefaults(defineProps<Props>(), {
	interruptResponseTimeScale: () => [],
	interruptResponseTimeData: () => [],
	responseTimeTrendScale: () => [],
	responseTimeTrendData: () => [],
	responseTimeDistributionScale: () => [],
	responseTimeDistributionData: () => [],
	isInterruptIntervalTime: true,
	invocationModeName: '',
});

const echartsData = reactive<any>({
	title: {
		text: '',
		left: 'center',
		// top: 'bottom',
		bottom: 0,
		textStyle: {
			//文字颜色
			color: '#FFFFFF',
			//字体风格,'normal','italic','oblique'
			fontStyle: 'normal',
			//字体粗细 'normal','bold','bolder','lighter',100 | 200 | 300 | 400...
			fontWeight: 500,
			//字体系列
			fontFamily: 'sans-serif',
			//字体大小
			fontSize: 16,
		},
	},
	grid: {
		left: '0%',
		right: '0%',
		top: '5%',
		bottom: '12%',
		containLabel: true,
	},
	barSeriesColor: {
		type: 'liner',
		x: 0,
		y: 1,
		x2: 0,
		y2: 0,
		colorStops: [
			{
				offset: 0,
				color: '#06F4F4',
			},
			{
				offset: 1,
				color: '#1dc69d',
			},
		],
		global: false, // 缺省为 false
	},
	data: [
		{
			value: 1048,
			name: '省公司',
		},
		{
			value: 735,
			name: '总公司',
		},
		{
			value: 580,
			name: '专业公司',
		},
		{
			value: 484,
			name: '集团总部',
		},
		{
			value: 484,
			name: '其他',
		},
	],
	colorGroup: ['#697CF6', '#4DBC84', '#FE5578', '#FE9A0C', '#06F4F4'],
});
const state = reactive<any>({
	isApiOrSdk: false,
	extendData: {
		pageNum: 1,
		pageSize: 10,
	},
	// 中断时长变化趋势柱状图
	interruptTimetrendOptions: {
		title: { ...echartsData.title },
		color: colorSortGroup,
		tooltip: {
			trigger: 'axis',
			axisPointer: {
				type: 'shadow',
			},
			formatter: function (params: any) {
				// 自定义 tooltip 数据
				return formatterToolTipFn(params, '次');
			},
		},
		grid: { ...GRID },
		xAxis: [
			{
				...xAxisOrYaxis.xAxis,
				data: props.interruptResponseTimeScale,
			},
		],
		yAxis: {
			...xAxisOrYaxis.yAxis,
			// 文本颜色
			axisLabel: {
				show: true,
				formatter: function (params: any) {
					// 自定义 tooltip 数据
					return commonFormatter(params, '次');
				},
			},
		},
		series: [
			{
				name: '中断时长变化趋势',
				type: 'bar',
				barWidth: '15%',
				data: props.interruptResponseTimeData,
				itemStyle: {
					normal: {
						color: echartsData.barSeriesColor,
						barBorderRadius: 50,
					},
				},
			},
		],
		// dataZoom: dataZoom,
	} as ECOption,
	// 平均响应耗时趋势折线图
	averageResponseTrendOptions: {
		title: { ...echartsData.title },
		tooltip: {
			trigger: 'axis',
			axisPointer: {
				type: 'line',
			},
			formatter: function (params: any) {
				// 自定义 tooltip 数据
				return formatterToolTipFn(params, 'wm');
			},
		},
		color: colorSortGroup,
		grid: { ...GRID },
		xAxis: {
			...xAxisOrYaxis.xAxis,
			data: props.responseTimeTrendScale,
		},
		yAxis: {
			...xAxisOrYaxis.yAxis,
			// 文本颜色
			axisLabel: {
				show: true,
				textStyle: {
					color: '#ffffff',
				},
				formatter: function (value: any) {
					return toDecimalFormate2(value, 'wm');
				},
			},
		},
		series: [
			{
				// 不显示折线节点
				name: '平均响应耗时趋势',
				symbolSize: SYMBOLSIZE,
				emphasis: {
					focus: 'series',
				},
				data: props.responseTimeTrendData,
				type: 'line',
				areaStyle: {},
			},
		],
		areaStyle: {
			color: {
				type: 'liner',
				x: 0,
				y: 0,
				x2: 0,
				y2: 1,
				colorStops: [
					{
						offset: 0,
						color: colorSortGroup[0],
					},
					{
						offset: 1,
						color: 'rgba(58,77,233,0)',
					},
				],
				global: false, // 缺省为 false
			},
		},
		// dataZoom: dataZoom,
	} as ECOption,
	// 响应耗时分布柱状图
	responseDistributionOptions: {
		title: { ...echartsData.title },
		tooltip: {
			trigger: 'axis',
			axisPointer: {
				type: 'shadow',
			},
			formatter: function (params: any) {
				// 自定义 tooltip 数据
				return formatterToolTipFn(params, '次');
			},
		},
		grid: { ...GRID },
		xAxis: [
			{
				...xAxisOrYaxis.xAxis,
				data: props.responseTimeDistributionScale,
			},
		],
		yAxis: {
			...xAxisOrYaxis.yAxis,
			// 文本颜色
			axisLabel: {
				show: true,
				textStyle: {
					color: '#ffffff',
				},
				formatter: function (value: any) {
					return commonFormatter(value, '次');
				},
			},
		},
		color: colorSortGroup,
		series: [
			{
				name: '响应耗时分布',
				type: 'bar',
				barWidth: '15%',
				data: props.responseTimeDistributionData,
			},
		],
	} as ECOption,
});
const { proxy }: any = getCurrentInstance();
const params = reactive({
	invocationMode: route.query.invocationMode || '',
});
const interruptTimeTrendBar = ref();

function echartsClick(e: any) {
	emit('echartsClick', e);
}

watch(
	() => props.isInterruptIntervalTime,
	(newVal) => {
		state.interruptTimetrendOptions.series[0].name = newVal ? '中断时长变化趋势' : '中断次数变化趋势';
	},
	{
		deep: true,
	}
);
watch(
	() => props.invocationModeName,
	(newVal) => {
		if (newVal === 'API' || newVal === 'SDK' || newVal === 'ApiOrSdk') {
			state.isApiOrSdk = true;
		} else {
			state.isApiOrSdk = false;
		}
	},
	{
		deep: true,
	}
);
</script>
<style lang="scss" scoped>
.container {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 340px;
	gap: 20px;
	.sonsuming-analysis {
		width: 100%;
		display: flex;
		gap: 20px;
		justify-content: space-between;
	}
}
</style>
